import { FC } from 'react'
import { Card, Col, Row } from 'antd'
import { CopyOutlined } from '@ant-design/icons'
import View from '@/components/View'
import Clipboard from '@/components/Clipboard'

const ClipboardPage: FC = () => {
  const date = Date.now().toString()
  const { copy } = useClipboard()
  return (
    <View className="app-page">
      <Card type="inner" title="剪切板">
        <Row>
          <Col span={6}>
            组件：
            {date}
            <Clipboard text={`组件：${date}`} />
          </Col>
          <Col span={6}>
            <div className="form-fields">
              Hooks：
              {date}
              <CopyOutlined onClick={() => copy(`Hooks：${date}`)} />
            </div>
          </Col>
        </Row>
      </Card>
    </View>
  )
}

export default ClipboardPage
